<template>
	<view class="y-flex y-flex-1 over-hidden" @tap="handleTap" :style="{'background-color': bgColor, 'border-radius': pixelunit(cellImageBorderRadius)}">
		<find-image class="y-flex-1" lazy-load :border-top-left-radius="cellImageBorderRadius" :border-top-right-radius="cellImageBorderRadius" :src="item.cover" mode="widthFix" :tip-size="cellImageTipSize"></find-image>
		<view class="y-flex pt-10 pl-20 pr-20 pb-20" v-if="item.title || item.subtitle">
			<com-text v-if="item.title" :lines="cellTitleLines" size="30" class="mt-10" :color="titleColor" :value="item.title"></com-text>
			<text v-if="item.subtitle" class="fs-24 lines-1 mt-10" :style="{color: textColor}">{{item.subtitle}}</text>
		</view>
	</view>
</template>

<script>
	import { pixelunit } from '@/assets/js/util.js'
	import FindImage from '../Image.vue'
	export default {
		name: 'WaterfallCell',
		inject: ['getSkinColor', 'navigate'],
		components: {
			FindImage
		},
		props: {
			item: {
				type: Object,
				default () {
					return new Object
				}
			},
			options: {
				type: Object,
				default () {
					return new Object
				}
			},
			bgColor: {
				type: String,
				default: ''
			}
		},
		computed: {
			skinColor () {
				return this.getSkinColor()
			},
			titleColor () {
				return this.skinColor.color_1
			},
			textColor () {
				return this.skinColor.color_3
			},
			cellBackgroundColor () {
				return this.options.cellBackgroundColor || this.boxBgColor
			},
			cellImageBorderRadius () {
				return this.options.cellImageBorderRadius || 10
			},
			cellImageTipSize () {
				return this.options.cellImageTipSize || 20
			},
			cellTitleLines () {
				return this.options.cellTitleLines || 1
			},
			pixelunit () {
				return pixelunit
			}
		},
		methods: {
			_pixelunit (size) {
				return pixelunit(size)
			},
			handleTap () {
				this.navigate(this.item.url)
			}
		}
	}
</script>

<style>
</style>